<div class="settings-container">
    <div class="settings-header">
        <h2><i class="fas fa-cog"></i> 系统设置</h2>
        <p>管理系统参数、日志和备份等核心功能</p>
    </div>

    <div class="settings-tabs">
        <div class="tab-buttons">
            <button class="tab-button active" data-tab="system-params">系统参数</button>
            <button class="tab-button" data-tab="log-management">日志管理</button>
            <button class="tab-button" data-tab="backup-restore">备份与恢复</button>
            <button class="tab-button" data-tab="system-monitor">系统监控</button>
        </div>

        <div class="tab-content active" id="system-params">
            <form class="settings-form">
                <div class="form-group">
                    <label for="system-name">系统名称</label>
                    <input type="text" id="system-name" value="政府公文知识库管理系统">
                </div>

                <div class="form-group">
                    <label for="session-timeout">会话超时(分钟)</label>
                    <input type="number" id="session-timeout" value="30" min="5" max="480">
                </div>

                <div class="form-group">
                    <label for="file-upload-limit">文件上传限制(MB)</label>
                    <input type="number" id="file-upload-limit" value="50" min="1" max="500">
                </div>

                <div class="form-group">
                    <label for="data-retention">数据保留期限(天)</label>
                    <input type="number" id="data-retention" value="365" min="30" max="3650">
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" id="enable-audit" checked>
                        启用操作审计日志
                    </label>
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" id="enable-notification">
                        启用系统通知
                    </label>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-primary">保存设置</button>
                    <button type="button" class="btn btn-default">恢复默认</button>
                </div>
            </form>
        </div>

        <div class="tab-content" id="log-management">
            <div class="log-filter">
                <div class="filter-group">
                    <label>日志类型:</label>
                    <select>
                        <option value="all">全部</option>
                        <option value="login">登录日志</option>
                        <option value="operation">操作日志</option>
                        <option value="system">系统日志</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label>时间范围:</label>
                    <input type="date" id="log-start-date">
                    <span>至</span>
                    <input type="date" id="log-end-date">
                </div>

                <div class="filter-group">
                    <label>用户:</label>
                    <input type="text" placeholder="输入用户名">
                </div>

                <button class="btn btn-primary">查询</button>
                <button class="btn btn-default">导出日志</button>
            </div>

            <div class="log-table-container">
                <table class="log-table">
                    <thead>
                    <tr>
                        <th>时间</th>
                        <th>用户</th>
                        <th>类型</th>
                        <th>操作</th>
                        <th>IP地址</th>
                        <th>详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2023-06-15 09:23:45</td>
                        <td>admin</td>
                        <td>操作日志</td>
                        <td>修改系统参数</td>
                        <td>192.168.1.100</td>
                        <td><button class="btn-detail">查看</button></td>
                    </tr>
                    <tr>
                        <td>2023-06-15 08:45:12</td>
                        <td>user1</td>
                        <td>登录日志</td>
                        <td>用户登录</td>
                        <td>192.168.1.101</td>
                        <td><button class="btn-detail">查看</button></td>
                    </tr>
                    <tr>
                        <td>2023-06-14 14:30:22</td>
                        <td>admin</td>
                        <td>系统日志</td>
                        <td>系统备份</td>
                        <td>192.168.1.100</td>
                        <td><button class="btn-detail">查看</button></td>
                    </tr>
                    </tbody>
                </table>

                <div class="pagination">
                    <button disabled>上一页</button>
                    <span class="current-page">1</span>
                    <button>下一页</button>
                    <span class="total-pages">共5页</span>
                </div>
            </div>
        </div>

        <div class="tab-content" id="backup-restore">
            <div class="backup-section">
                <h3><i class="fas fa-database"></i> 数据备份</h3>
                <div class="backup-options">
                    <div class="option-card">
                        <h4>完整备份</h4>
                        <p>备份系统所有数据，包括文档、用户信息等</p>
                        <button class="btn btn-primary">立即备份</button>
                    </div>

                    <div class="option-card">
                        <h4>增量备份</h4>
                        <p>仅备份自上次备份以来更改的数据</p>
                        <button class="btn btn-primary">立即备份</button>
                    </div>

                    <div class="option-card">
                        <h4>自动备份设置</h4>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" checked>
                                启用自动备份
                            </label>
                        </div>
                        <div class="form-group">
                            <label>备份频率:</label>
                            <select>
                                <option value="daily">每日</option>
                                <option value="weekly" selected>每周</option>
                                <option value="monthly">每月</option>
                            </select>
                        </div>
                        <button class="btn btn-primary">保存设置</button>
                    </div>
                </div>
            </div>

            <div class="restore-section">
                <h3><i class="fas fa-undo"></i> 数据恢复</h3>
                <div class="backup-list">
                    <table>
                        <thead>
                        <tr>
                            <th>备份时间</th>
                            <th>备份类型</th>
                            <th>文件大小</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2023-06-10 02:00:00</td>
                            <td>完整备份</td>
                            <td>1.2 GB</td>
                            <td>
                                <button class="btn-restore">恢复</button>
                                <button class="btn-download">下载</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2023-06-03 02:00:00</td>
                            <td>完整备份</td>
                            <td>1.1 GB</td>
                            <td>
                                <button class="btn-restore">恢复</button>
                                <button class="btn-download">下载</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="tab-content" id="system-monitor">
            <div class="monitor-overview">
                <div class="stat-card">
                    <div class="stat-value">85%</div>
                    <div class="stat-label">CPU使用率</div>
                    <div class="stat-progress">
                        <div class="progress-bar" style="width: 85%"></div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-value">64%</div>
                    <div class="stat-label">内存使用率</div>
                    <div class="stat-progress">
                        <div class="progress-bar" style="width: 64%"></div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-value">1.2 TB</div>
                    <div class="stat-label">存储使用</div>
                    <div class="stat-progress">
                        <div class="progress-bar" style="width: 45%"></div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-value">24</div>
                    <div class="stat-label">在线用户</div>
                    <div class="stat-progress">
                        <div class="progress-bar" style="width: 60%"></div>
                    </div>
                </div>
            </div>

            <div class="monitor-charts">
                <div class="chart-container">
                    <h4>CPU使用率历史</h4>
                    <div class="chart-placeholder">图表区域</div>
                </div>

                <div class="chart-container">
                    <h4>内存使用历史</h4>
                    <div class="chart-placeholder">图表区域</div>
                </div>

                <div class="chart-container">
                    <h4>存储空间使用</h4>
                    <div class="chart-placeholder">图表区域</div>
                </div>

                <div class="chart-container">
                    <h4>用户活跃度</h4>
                    <div class="chart-placeholder">图表区域</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 系统设置页面样式 */
    .settings-container {
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .settings-header {
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .settings-header h2 {
        color: #333;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .settings-header h2 i {
        margin-right: 10px;
        color: #1a5fb4;
    }

    .settings-header p {
        color: #666;
        font-size: 14px;
    }

    /* 标签页样式 */
    .settings-tabs {
        margin-top: 20px;
    }

    .tab-buttons {
        display: flex;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
    }

    .tab-button {
        padding: 10px 20px;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        font-size: 14px;
        color: #666;
        transition: all 0.3s;
    }

    .tab-button:hover {
        color: #1a5fb4;
    }

    .tab-button.active {
        color: #1a5fb4;
        border-bottom-color: #1a5fb4;
        font-weight: bold;
    }

    .tab-content {
        display: none;
        padding: 15px 0;
    }

    .tab-content.active {
        display: block;
    }

    /* 表单样式 */
    .settings-form {
        max-width: 600px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #444;
    }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .checkbox-group label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .checkbox-group input {
        margin-right: 8px;
    }

    .form-actions {
        margin-top: 30px;
        display: flex;
        gap: 10px;
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid transparent;
    }

    .btn-primary {
        background-color: #1a5fb4;
        color: white;
    }

    .btn-primary:hover {
        background-color: #0d47a1;
    }

    .btn-default {
        background-color: #f0f0f0;
        color: #333;
        border-color: #ddd;
    }

    .btn-default:hover {
        background-color: #e0e0e0;
    }

    /* 日志管理样式 */
    .log-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 20px;
        align-items: center;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .log-table-container {
        overflow-x: auto;
    }

    .log-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .log-table th,
    .log-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .log-table th {
        background-color: #f5f5f5;
        font-weight: 500;
        color: #444;
    }

    .log-table tr:hover {
        background-color: #f9f9f9;
    }

    .btn-detail {
        padding: 4px 8px;
        font-size: 12px;
        background-color: #f0f7ff;
        color: #1a5fb4;
        border: 1px solid #d0e3ff;
        border-radius: 3px;
    }

    .btn-detail:hover {
        background-color: #e0efff;
    }

    .pagination {
        display: flex;
        align-items: center;
        margin-top: 20px;
        gap: 10px;
    }

    /* 备份与恢复样式 */
    .backup-section,
    .restore-section {
        margin-bottom: 30px;
    }

    .backup-options {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .option-card {
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 5px;
        background-color: #fafafa;
    }

    .option-card h4 {
        margin-top: 0;
        color: #333;
    }

    .option-card p {
        color: #666;
        font-size: 13px;
        margin: 10px 0 15px;
    }

    .backup-list table {
        width: 100%;
        border-collapse: collapse;
    }

    .backup-list th,
    .backup-list td {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .backup-list th {
        background-color: #f5f5f5;
    }

    .btn-restore {
        background-color: #f0f7ff;
        color: #1a5fb4;
        border: 1px solid #d0e3ff;
    }

    .btn-restore:hover {
        background-color: #e0efff;
    }

    .btn-download {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #ddd;
        margin-left: 8px;
    }

    .btn-download:hover {
        background-color: #e0e0e0;
    }

    /* 系统监控样式 */
    .monitor-overview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        padding: 20px;
        background-color: #fafafa;
        border-radius: 5px;
        text-align: center;
        border: 1px solid #eee;
    }

    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #1a5fb4;
        margin-bottom: 5px;
    }

    .stat-label {
        color: #666;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .stat-progress {
        height: 6px;
        background-color: #eee;
        border-radius: 3px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background-color: #1a5fb4;
    }

    .monitor-charts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 20px;
    }

    .chart-container {
        padding: 20px;
        background-color: #fafafa;
        border-radius: 5px;
        border: 1px solid #eee;
    }

    .chart-container h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
    }

    .chart-placeholder {
        height: 200px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        border-radius: 4px;
    }

    @media (max-width: 768px) {
        .monitor-overview,
        .monitor-charts {
            grid-template-columns: 1fr;
        }

        .log-filter {
            flex-direction: column;
            align-items: flex-start;
        }

        .filter-group {
            width: 100%;
        }
    }
</style>